<template>
	<view class="order-card">
		<view class="" v-if="orderList.length">
			<view class="w94 mt20 radius20">
				<view class="card" style="padding-bottom: 40rpx;">
					<scroll-view scroll-y="true" :scroll-top="0" class="scroll_views" @scrolltolower="lower"
						@scroll="scroll" refresher-enabled="true" :refresher-triggered="triggered"
						:refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
						@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
						<view class="radius20 bgwhite mt20" style="padding: 20rpx;" v-for="(item,index) in orderList"
							@click="make(item)" :key="index">
							<block v-if="current==0">
								<block v-if="item.order_type==4">
									<view class="flex-start radius20 bgwhite item-card">
										<view class="flex-between card-content">
											<view class="flex-between" style="width: 100%;">
												<view style="font-size: 30rpx;">{{item.category_name|| '小工/杂工'}}</view>
												<view class="salary">
													<text v-if="item.pay_type==3">面议</text>
													<text v-if="item.pay_type==2"
														style="color: red;">{{ '￥'+item.pay_money}}</text>
												</view>
											</view>
											<view class="adress">工作地点:{{item.address||'北京'}}</view>
											<view
												style="font-size: 28rpx;width: 90%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
												工作要求:{{item.remark||'具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求具体工作要求'}}
											</view>
											<view class="tag">
												<u-tag text="立即预约" color="#000" borderColor="transparent" shape="circle"
													bg-color="#CEEE5B" @click="make(item)"></u-tag>
											</view>
										</view>
									</view>
								</block>
								<block v-else>
									<view class="" style="display: flex;justify-content: space-between;padding: 15rpx;">
										<view class="" style="width: 50%;">
											<view style="font-size: 28rpx;font-weight: bold;margin-bottom: 20rpx;">
												{{item.goods_name||"橱柜"}}
											</view>
											<text class=""
												style="font-size: 24rpx;border: 1px solid;border-radius: 8rpx;padding: 4rpx;">
												{{item.category_name||'待服务'}}
											</text>
										</view>
										<view class="" style="width: 50%;text-align: right;color: red;">
											<view class="" v-if="item.order_type==1">
												<text style="font-size: 24rpx;color: red;">到手价￥</text>
												{{item.pay_money||'订单金额'}}
												<view class="" style="font-size: 24rpx;color: #ccc;margin-top: 20rpx;">
													一口价
												</view>
											</view>
											<view class="" v-else-if="item.order_type==2">
												<text style="font-size: 24rpx;color: red;">报价快，中选高</text>
												<view class="" style="font-size: 24rpx;color: #ccc;margin-top: 20rpx;">
													报价
												</view>
											</view>
											<view class="" v-else>
												<text style="font-size: 24rpx;color: red;"></text>
												<view class="" style="font-size: 24rpx;color: #ccc;margin-top: 20rpx;">
													指派
												</view>
											</view>
										</view>
									</view>
									<view class="flex" style="padding: 0 20rpx;">
										<image :src="item.goods_photo.split(',')[0]"
											style="width: 140rpx;height: 140rpx;margin: 20rpx; border: 1px solid;border-radius: 16rpx;"
											v-if="item.goods_photo.split(',')[0]"></image>
										<image src="@/static/lg.png"
											style="width: 140rpx;height: 140rpx;margin: 20rpx; border: 1px solid;border-radius: 16rpx;"
											v-else></image>
										<view class="flex"
											style="flex-direction: column;justify-content: space-evenly;width: 70%;">
											<view class="small-size" style="color:#000">
												{{ item.province+ item.city+ item.area + item.address ||'用户的详细地址'}}
											</view>
											<view class="small-size" style="color:#000">
												期望上门时间:{{ item.datetime||  '接单后与业主预约'}}
											</view>
										</view>
									</view>
									<u-line></u-line>
									<view class="tags">
										<view class="" v-if="item.order_type==1">
											<u-tag text="立即抢单" color="#000" borderColor="transparent" shape="circle"
												bg-color="#CEEE5B" @click="make(item)"></u-tag>
										</view>
										<view class="" v-else-if="item.order_type==2">
											<u-tag text="立即报价" color="#000" borderColor="transparent" shape="circle"
												bg-color="#CEEE5B" @click="make(item)"></u-tag>
										</view>
										<view class="" v-else>
											<u-tag text="查看订单" color="#000" borderColor="transparent" shape="circle"
												bg-color="#CEEE5B" @click="make(item)"></u-tag>
										</view>
									</view>
								</block>
							</block>
							<block v-else>
								<view class="" style="display: flex;justify-content: space-between;padding: 15rpx;">
									<view class="" style="width: 50%;">
										<view style="font-size: 28rpx;font-weight: bold;margin-bottom: 20rpx;">
											{{item.goods_name||"橱柜"}}
										</view>
										<text class=""
											style="font-size: 24rpx;border: 1px solid;border-radius: 8rpx;padding: 4rpx;">
											{{item.category_name||'待服务'}}
										</text>
									</view>
									<view class="" style="width: 50%;text-align: right;color: red;">
										<view class="" v-if="current==1">
											<text style="font-size: 24rpx;color: red;">到手价￥</text>
											{{item.pay_money||'订单金额'}}
											<view class="" style="font-size: 24rpx;color: #ccc;margin-top: 20rpx;">
												一口价
											</view>
										</view>
										<view class="" v-else-if="current==2">
											<text style="font-size: 24rpx;color: red;">报价快，中选高</text>
											<view class="" style="font-size: 24rpx;color: #ccc;margin-top: 20rpx;">
												报价
											</view>
										</view>
										<view class="" v-else>
											<text style="font-size: 24rpx;color: red;"></text>
											<view class="" style="font-size: 24rpx;color: #ccc;margin-top: 20rpx;">
												指派
											</view>
										</view>
									</view>
								</view>
								<view class="flex" style="padding: 0 20rpx;">
									<image :src="item.goods_photo.split(',')[0]"
										style="width: 140rpx;height: 140rpx;margin: 20rpx; border: 1px solid;border-radius: 16rpx;"
										v-if="item.goods_photo.split(',')[0]"></image>
									<image src="@/static/lg.png"
										style="width: 140rpx;height: 140rpx;margin: 20rpx; border: 1px solid;border-radius: 16rpx;"
										v-else></image>
									<view class="flex" style="flex-direction: column;justify-content: space-evenly; width: 70%;">
										<view class="small-size" style="color:#000">
											{{ item.province+ item.city+ item.area + item.address ||'用户的详细地址'}}
										</view>
										<view class="small-size" style="color:#000">
											期望上门时间:{{ item.datetime||  '接单后与业主预约'}}
										</view>
									</view>
								</view>
								<u-line></u-line>
								<view class="tags">
									<view class="" v-if="current==1">
										<u-tag text="立即抢单" color="#000" borderColor="transparent" shape="circle"
											bg-color="#CEEE5B" @click="make(item)"></u-tag>
									</view>
									<view class="" v-else-if="current==2">
										<u-tag text="立即报价" color="#000" borderColor="transparent" shape="circle"
											bg-color="#CEEE5B" @click="make(item)"></u-tag>
									</view>
									<view class="" v-else>
										<u-tag text="查看订单" color="#000" borderColor="transparent" shape="circle"
											bg-color="#CEEE5B" @click="make(item)"></u-tag>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="" v-else style="margin-top: 20rpx;">
			<u-empty mode="order" text-size="20px"></u-empty>
		</view>
		<u-modal :show="show" :title="title" @confirm="confirms" @cancel="cancels" :showCancelButton="true">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		comprehensive,
		orderListIndex
	} from '@/common/teacherReq';
	export default {
		name: "ordercard",
		data() {
			return {
				show: false,
				title: '请先登录',
				content: '您还未登录<br>请登录后再查询订单详情',
				id: null,
				triggered: false,
				total: 0,
				page: 0,
				orderList: [],
				isNull: false,
			};
		},
		props: [
			'current'
		],
		computed: {
			info() {
				return uni.getStorageSync('info')
			}
		},
		methods: {
			make(item) {
				// console.log('!this.info.token:1111', this.info.token)
				if (!uni.getStorageSync('token')) {
					this.show = true
				} else {
					this.toPage('/subpack/index/detail?id=' + item.id + '&type=' + this.current)
				}
			},
			clickItem(item) {
				this.toPage('/subpack/index/detail?id=' + item.id)
			},
			cancels() {
				this.show = false
				// this.toPage('/subpack/index/detail')
			},
			confirms() {
				this.toPage('/subpack/login/login')
				this.show = false
			},
			lower(e) {
				if (this.isNull) {
					uni.showToast({
						title: '没有更多了',
						icon: 'error'
					})
					return
				}
				this.page += 1
				if (this.current == 0) {
					this.getList()
				} else {
					this.orderListFun()
				}
				console.log(e, 'lower')
			},
			scroll(e) {
				// console.log(e, 'scroll')
			},
			onPulling(e) {
				// console.log("onpulling", e);
			},
			async onRefresh() {
				if (this._freshing) return;
				this.total = 0
				this.page = 0
				this.orderList = []
				this.isNull = false
				this._freshing = true;
				if (this.current == 0) {
					await this.getList()
					this.triggered = false;
					this._freshing = false;
				} else {
					await this.orderListFun()
					this.triggered = false;
					this._freshing = false;
				}
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			orderListFun() {
				let data = {
					type: this.current,
					page: this.page,
				}
				if (this.current == 1) {
					// lat=35.441306&lng=116.595409
					data = {
						...data,
						lat: 35.441306,
						lng: 116.595409
					}
					// uni.getLocation({
					// 	type: 'wgs84',
					// 	success: (res) => {
					// 		data = {
					// 			...data,
					// 			lat: res.latitude,
					// 			lng: res.longitude
					// 		}
					// 		console.log(data, 'data------:1')
					// 		orderListIndex(data).then(res => {
					// 			if (res.data.order_list.length) {
					// 				this.orderList = this.orderList.concat(res.data.order_list)
					// 				this.total = res.data.total
					// 			} else {
					// 				this.isNull = true
					// 			}
					// 		})
					// 	},fail: (err) => {
					// 		console.log('err: ',err);
					// 	}
					// })
					orderListIndex(data).then(res => {
						if (res.data.order_list.length) {
							this.orderList = this.orderList.concat(res.data.order_list)
							this.total = res.data.total
						} else {
							this.isNull = true
						}
					})
				} else {
					orderListIndex(data).then(res => {
						if (res.data.order_list.length) {
							this.orderList = this.orderList.concat(res.data.order_list)
							this.total = res.data.total
						} else {
							this.isNull = true
						}
					})
				}
			},
			getList() {
				comprehensive({
					page: this.page
				}).then(res => {
					if (res.data.order_list.length) {
						this.orderList = this.orderList.concat(res.data.order_list)
						this.total = res.data.total
					} else {
						this.isNull = true
					}
				})
			}
		},
		watch: {
			current: {
				handler(n, old) {
					this.total = 0
					this.page = 0
					this.orderList = []
					if (n == 0) {
						this.getList()
					} else {
						this.orderListFun()
					}
				},
				deep: true, // 如果 current 是对象或数组，可能需要 deep: true
				immediate: true
			}
		},
		onLoad() {
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)
		},

	}
</script>

<style lang="scss" scoped>
	.item-card {
		width: 100%;
		padding: 20rpx 10rpx;

		.card-content {
			flex-direction: column;
			min-height: 180rpx;
			align-items: flex-start;
			width: 100%;
			padding: 20rpx;

			.adress {
				font-size: 28rpx;
				margin: 20rpx 0;
			}

			.tag {
				display: flex;
				justify-content: flex-end;
				width: 100%;
			}
		}

	}

	.tags {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		margin-top: 20rpx;
	}

	.order-card {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scroll_views {
			// flex: 1;
			height: calc(100vh - 100px);
			margin-top: 35px;
		}
	}
</style>